<!-- src/App.vue -->
<template>
  <div id="app">
    <el-container>
      <el-aside width="200px" class="sidebar">
        <el-menu default-active="1" class="sidebar-menu" @select="handleSelect">
          <el-menu-item index="1" @click="$router.push('/users')">用户管理</el-menu-item>
          <el-submenu index="2">
            <template #title>菜品管理</template>
            <el-menu-item index="2-1" @click="$router.push('/categories')">菜品分类管理</el-menu-item>
            <el-menu-item index="2-2" @click="$router.push('/dish-info')">菜品信息管理</el-menu-item>
            <el-menu-item index="2-3" @click="$router.push('/dish-status')">菜品上下架管理</el-menu-item>
          </el-submenu>
          <el-menu-item index="3" @click="$router.push('/orders')">订单管理</el-menu-item>
          <el-menu-item index="4" @click="$router.push('/cart')">购物车管理</el-menu-item>
          <el-menu-item index="5" @click="$router.push('/payments')">支付管理</el-menu-item>
          <el-menu-item index="6" @click="$router.push('/notifications')">通知管理</el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header class="header">
          <h1>点餐管理系统</h1>
        </el-header>
        <el-main class="main-content">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    handleSelect(index) {
      console.log('Selected menu item:', index);
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 0;
  height: 100vh; /* 使容器充满视口 */
}

.sidebar {
  background-color: #c3d9fb; /* 菜单栏背景颜色 */
  border-right: 1px solid #c3d9fb; /* 菜单栏边框 */
}

.header {
  background-color: #959595; /* 头部背景颜色 */
  color: white; /* 头部文字颜色 */
  padding: 10px; /* 头部内边距 */
}

.sidebar-menu {
  height: 100%; /* 使菜单栏充满高度 */
}

.main-content {
  padding: 20px; /* 主内容内边距 */
  background-color: #f5f7fa; /* 主内容背景颜色 */
  border-radius: 5px; /* 圆角 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}
</style>